<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
    <el-form-item label="教师编号" prop="no">
      <el-input v-model="ruleForm.no" />
    </el-form-item>
    <el-form-item label="教师姓名" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" />
    </el-form-item>
    <el-form-item label="教师角色" prop="type">
      <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
        <el-option v-for="(name,roleId) in roles" :key="roleId" :label="name" :value="roleId" />
      </el-select>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="ruleForm.phone" />
    </el-form-item>
    <el-form-item label="邮箱地址" prop="mail">
      <el-input v-model="ruleForm.mail" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'TeacherEdit',
  props: {
    editId: {
      type: Number,
      default: undefined
    }
  },
  data() {
    const validphone = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('手机号不合法'))
      } else {
        callback()
      }
    }
    const validmail = (rule, value, callback) => {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
      if (!reg.test(value)) {
        callback(new Error('邮箱不合法'))
      } else {
        callback()
      }
    }
    const checkno = (rule, value, callback) => {
      if (this.ruleForm.id === '') {
        this.get('/teacher/ckeckNo', result => {
          if (result.data === 0) {
            callback()
          } else {
            callback(new Error(result.message))
          }
        }, { no: value })
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        id: '',
        no: '',
        name: '',
        password: '',
        type: '',
        phone: '',
        mail: ''
      },
      rules: {
        no: [
          { required: true, message: '请输入教师编号', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' },
          { validator: checkno, trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入教师姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validphone, trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { validator: validmail, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    if (this.editId !== undefined) {
      this.ruleForm.id = this.editId
      this.get('/teacher/getone', (result) => {
        this.extend(this.ruleForm, result.data)
        this.ruleForm.type = this.ruleForm.type.toString()
      }, { id: this.editId })
    } else {
      this.ruleForm.id = ''
      this.reset()
    }
  },
  methods: {
    reset() {
      this.ruleForm = {
        id: undefined,
        no: '',
        name: '',
        password: '',
        type: '',
        phone: '',
        mail: ''
      }
    },
    onSubmit() {
      this.post('/teacher/save', 'ruleForm', result => {
        this.$emit('getlist')
        this.$emit('update:dialogFormVisible', false)
      }, this.ruleForm)
    }
  }
}
</script>
<style scoped>
</style>
